<!DOCTYPE html>
<html>

<head>
    <title>Flaticon WebFont</title>
    <link rel="stylesheet" type="text/css" href="flaticon.css">
    <meta charset="UTF-8">
    <style>
    body {
        font-family: sans-serif;
        line-height: 1.5;
        font-size: 16px;
        padding: 20px;
        color:#333;
    }
    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
        font-family: Flaticon;
        font-size: 30px;
        font-style: normal;
        margin-left: 20px;
        color: #333;
    }
    .image p {
		font-size: 12px;
		margin: 0px;
		clear: none;
		width: 300px;
		line-height: 40px;
	}
    .text {
        float: left;
        font-size:14px;
        margin-top: 15px;
    }
    .text ul {
        margin-left:0px;
        color:#111;
        margin-bottom:20px;
    }
    .text .ex {
        font-size:12px;
        color:#666;
        margin-left:35px;
        display:block;
    }
    .text ul li {
        margin-top:10px;
        list-style:none;
    }
    .num {
        background:#66A523;
        color:#fff;
        border-radius:20px;
        padding:1px;
        display:inline-block;
        width:22px;
        height:22px;
        text-align:center;
        margin-right: 5px;
    }
    .text ul strong {
        font-weight:normal;
        color:#000;
    }
    .image {
        width: 280px;
        float: left;
        margin-bottom: 15px;
        margin-right: 30px;
    }
    #glyphs {
        clear: both;
    }
    .image p:nth-child(even) i {
        clear: none;
    }
    .glyph {
        display: inline-block;
        width: 120px;
        margin: 10px;
        text-align: center;
        vertical-align: top;
        background: #FFF;
    }
    .glyph .glyph-icon {
        padding: 10px;
        display: block;
        font-family:"Flaticon";
        font-size: 64px;
        line-height: 1;
    }
    .glyph .glyph-icon:before {
        font-size: 64px;
        color: #666;
        margin-left: 0;
    }
    .class-name {
        font-size: 12px;
    }
    .author-name {
		font-size: 10px;
	}
	a{
		color: #66A523;
	}
    .instructions {
        font-style:italic;
        font-size:22px;
        margin-bottom:10px;
    }
    .iconsuse {
        font-size:22px;
        font-style:italic;
        padding-top:20px;
        margin-top:20px;
        border-top:1px solid #bbb;
    }
    .usetitle {
        margin-bottom: 10px;
        font-size: 20px;
        font-style: italic;
    }
    .class-name:last-child {
        font-size: 10px;
        color:#888;
    }
    .class-name:last-child a {
        font-size: 10px;
        color:#555;
    }
    .class-name:last-child a:hover {
        color:#66A523;
    }
    .glyph > input {
        display: block;
        width: 100px;
        margin: 5px auto;
        text-align: center;
        font-size: 12px;
        cursor: text;
    }
    .glyph > input.icon-input {
        font-family:"Flaticon";
        font-size: 16px;
        margin-bottom: 10px;
    }
    h1.logo {
        font-size: 40px;
        letter-spacing: -1px;
        margin-top: -16px;
        text-transform: lowercase;
        border-bottom:1px solid #bbb;
    }
    h1.logo strong {
        font-size: 16px;
        font-family:sans-serif;
        font-weight:normal;
        color:#333;
    }
    h1.logo a {
        color:#34302d;
        text-decoration: none;
    }
    h1.logo a span {
        color:#66A523;
    }
    #footer {
        padding-top:40px;
        clear:both;
        text-align:center;
    }
    #footer a {
        color:#66A523;
    }
    textarea {
		margin: 0px;
		width: 800px;
		height: 150px;
		border: 1px solid #CCC;
		resize: none;
		background: #EEE;
    }
    .author-link, .attrDiv a{
    	font-size: 12px;
    	color: #333;
    	text-decoration: none;
    }
    .external {
    	display: block;
    }
    .attrDiv {
		font-size: 12px;
	}
    .attribution {
        border-top: 1px solid #AAA;
        margin: 10px 0;
        padding-top: 15px;
    }
    </style>
</head>

<body>
    <header>
        <h1 class="logo">
            <a href="http://www.flaticon.com">
                <span>FLAT</span>ICON</a>
            <strong>Font Demo</strong>
        </h1>
    </header>

    <section class="demo">
        <div class="text">

            <div class="instructions">Instructions:</div>

            <ul>
                <li>
                    <p>
                        <span class="num">1</span>Copy the "Fonts" files and CSS files to your website CSS folder.
                </li>
                <li>
                    <p>
                        <span class="num">2</span>Add the CSS link to your website source code on header.
                        <br />
                        <span class="ex">&lt;head&gt;
                            <br/>...
                            <br/>&lt;link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css"&gt;
                            <br/>...
                            <br/>&lt;/head&gt;</span>
                </li>

                <li>
                    <p>
                        <span class="num">3</span>Use the icon class on "display:inline" elements:
                        <br />
                        <span class="ex">Use example: &lt;i class=&quot;flaticon-airplane49&quot;&gt;&lt;/i&gt; or &lt;span class=&quot;flaticon-airplane49&quot;&gt;&lt;/span&gt;</span>
                </li>
            </ul>
        </div>

    </section>

    <section id="glyphs"><div class="glyph">
		<div class="glyph-icon flaticon-award18"></div>
		<div class="class-name">.flaticon-award18</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/award-star-with-olive-branches_47878">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-award9"></div>
		<div class="class-name">.flaticon-award9</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/award-medal-of-number-one-with-olive-branches_47838">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-businessman223"></div>
		<div class="class-name">.flaticon-businessman223</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/businessman_57134">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-cooker4"></div>
		<div class="class-name">.flaticon-cooker4</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/cooker_56816">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-double57"></div>
		<div class="class-name">.flaticon-double57</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/double-star-with-a-ribbon_42223">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-female233"></div>
		<div class="class-name">.flaticon-female233</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/female-chef_56861">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-first33"></div>
		<div class="class-name">.flaticon-first33</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/first-prize-trophy_47844">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-fivepointed1"></div>
		<div class="class-name">.flaticon-fivepointed1</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/fivepointed-star-award-symbol_47929">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-fivepointed3"></div>
		<div class="class-name">.flaticon-fivepointed3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/fivepointed-star-award_47991">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-fruits"></div>
		<div class="class-name">.flaticon-fruits</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/fruits_8451">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-game39"></div>
		<div class="class-name">.flaticon-game39</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/game-winner-with-trophy_40890">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-game44"></div>
		<div class="class-name">.flaticon-game44</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/game-winner-celebration-on-podium_41420">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-games16"></div>
		<div class="class-name">.flaticon-games16</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/games-ribbon_41375">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-games18"></div>
		<div class="class-name">.flaticon-games18</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/games-podium-with-trophy-for-number-one_41397">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-games21"></div>
		<div class="class-name">.flaticon-games21</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/games-winner-and-trophy_41419">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-male2"></div>
		<div class="class-name">.flaticon-male2</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/male-muscles-of-sports_8311">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-man204"></div>
		<div class="class-name">.flaticon-man204</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/man-in-a-party-dancing-with-people_42175">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-man336"></div>
		<div class="class-name">.flaticon-man336</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/man-with-a-crown_47863">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-medal41"></div>
		<div class="class-name">.flaticon-medal41</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/medal-on-a-ribbon-for-number-one_41983">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-medal6"></div>
		<div class="class-name">.flaticon-medal6</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/medal-with-star_14023">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-person283"></div>
		<div class="class-name">.flaticon-person283</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/person-with-medal-necklace_47922">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-shield61"></div>
		<div class="class-name">.flaticon-shield61</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/shield-with-fivepointed-star_40884">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-sports27"></div>
		<div class="class-name">.flaticon-sports27</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/sports-trophy-cup-with-leaves-branches_47896">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-star124"></div>
		<div class="class-name">.flaticon-star124</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/star-hanging-of-a-ribon_42062">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-symbolic2"></div>
		<div class="class-name">.flaticon-symbolic2</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/symbolic-shield-with-crown-and-olive-branches_47813">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-teacher37"></div>
		<div class="class-name">.flaticon-teacher37</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/teacher-with-laptop_46467">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-thumb34"></div>
		<div class="class-name">.flaticon-thumb34</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/thumb-up-in-a-circle_47804">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-top6"></div>
		<div class="class-name">.flaticon-top6</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/top-games-star_40894">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-trophy14"></div>
		<div class="class-name">.flaticon-trophy14</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/trophy-cup-for-number-one_41382">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-winner3"></div>
		<div class="class-name">.flaticon-winner3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/winner-with-trophy_42197">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-young23"></div>
		<div class="class-name">.flaticon-young23</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/young-elegant-man-with-bow_56918">Freepik</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-young25"></div>
		<div class="class-name">.flaticon-young25</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/young-chef_57054">Freepik</a></div></div></section>

<section class="attribution">

	<div class="usetitle">License and attribution:</div><div class="attrDiv">Font generated by <a href="http://www.flaticon.com">flaticon.com</a>
 under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY</a>. The authors are: <a href="http://www.freepik.com">Freepik</a>.</div><div class="usetitle">Copy the Attribution License:</div>

<textarea onclick="this.focus();this.select();">Font generated by &lt;a href=&quot;http://www.flaticon.com&quot;&gt;flaticon.com&lt;/a&gt;
 under &lt;a href=&quot;http://creativecommons.org/licenses/by/3.0/&quot;&gt;CC BY&lt;/a&gt;. The authors are: &lt;a href=&quot;http://www.freepik.com&quot;&gt;Freepik&lt;/a&gt;.</textarea>

</section>

<section class="iconsuse">
    	<div class="usetitle">Examples:</div>
		<div class="image"><p>&lt;i class=&quot;flaticon-award18&quot;&gt;&lt;/i&gt; <i class="flaticon-award18"></i></p><p>&lt;i class=&quot;flaticon-award9&quot;&gt;&lt;/i&gt; <i class="flaticon-award9"></i></p><p>&lt;i class=&quot;flaticon-businessman223&quot;&gt;&lt;/i&gt; <i class="flaticon-businessman223"></i></p><p>&lt;i class=&quot;flaticon-cooker4&quot;&gt;&lt;/i&gt; <i class="flaticon-cooker4"></i></p><p>&lt;i class=&quot;flaticon-double57&quot;&gt;&lt;/i&gt; <i class="flaticon-double57"></i></p></div><div class="image"><p>&lt;span class=&quot;flaticon-female233&quot;&gt;&lt;/span&gt; <span class="flaticon-female233"></span></p><p>&lt;span class=&quot;flaticon-first33&quot;&gt;&lt;/span&gt; <span class="flaticon-first33"></span></p><p>&lt;span class=&quot;flaticon-fivepointed1&quot;&gt;&lt;/span&gt; <span class="flaticon-fivepointed1"></span></p><p>&lt;span class=&quot;flaticon-fivepointed3&quot;&gt;&lt;/span&gt; <span class="flaticon-fivepointed3"></span></p><p>&lt;span class=&quot;flaticon-fruits&quot;&gt;&lt;/span&gt; <span class="flaticon-fruits"></span></p></div><div class="image"><p>&lt;span class=&quot;flaticon-game39&quot;&gt;&lt;/span&gt; <span class="flaticon-game39"></span></p><p>&lt;i class=&quot;flaticon-game44&quot;&gt;&lt;/i&gt; <i class="flaticon-game44"></i></p><p>&lt;i class=&quot;flaticon-games16&quot;&gt;&lt;/i&gt; <i class="flaticon-games16"></i></p><p>&lt;i class=&quot;flaticon-games18&quot;&gt;&lt;/i&gt; <i class="flaticon-games18"></i></p><p>&lt;i class=&quot;flaticon-games21&quot;&gt;&lt;/i&gt; <i class="flaticon-games21"></i></p></div><div class="image"><p>&lt;span class=&quot;flaticon-male2&quot;&gt;&lt;/span&gt; <span class="flaticon-male2"></span></p><p>&lt;span class=&quot;flaticon-man204&quot;&gt;&lt;/span&gt; <span class="flaticon-man204"></span></p><p>&lt;span class=&quot;flaticon-man336&quot;&gt;&lt;/span&gt; <span class="flaticon-man336"></span></p><p>&lt;span class=&quot;flaticon-medal41&quot;&gt;&lt;/span&gt; <span class="flaticon-medal41"></span></p><p>&lt;span class=&quot;flaticon-medal6&quot;&gt;&lt;/span&gt; <span class="flaticon-medal6"></span></p></div><div class="image"></div>
</section>
<div id="footer">
    <div>Generated by <a href="http://www.flaticon.com">flaticon.com</a>
    </div>
</div>
	</body>
</html>